<template>
	<gracePage statusBarBG="#EB5D4B" :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<!-- 搜索组件 -->
			<view style="padding:20rpx; background-color:#F8F8F8;" id="hSearch" class="grace-flex grace-rows grace-flex-vcenter grace-space-between">
				<graceSearch @clear="search" @inputting="search"></graceSearch>
			</view>
			<scroll-view scroll-y="true" :scroll-into-view="showCityId" :style="{height:mainHeight+'px'}">
				<view class="grace-body grace-margin-top" id="pageTop">
					<view class="grace-title">当前城市 : {{currentCity}}</view>
					<view class="grace-title">热门城市</view>
					<view class="grace-wrap" style="padding-bottom:20rpx;">
						<view class="hotcity-item" v-for="(item, index) in hotCities" :key="index" :data-cityname="item.name" :data-citycode="item.code" @tap="chooseCity">{{item.name}}</view>
					</view>
					<block v-for="(cities, index) in cityData" :key="index">
						<view class="grace-city-AZ" :id="'grace-city-AZ-'+index">{{index}}</view>
						<view class="city-item" :id="'grace-city-list-'+city.code" v-for="(city, cindex) in cities" :key="cindex" 
						:data-cityname="city.name" :data-citycode="city.code" @tap="chooseCity">{{city.name}}</view>
					</block>
					<view class="grace-city-AZ-right">
						<view v-for="(char, index) in AZ" :key="index" :data-char="char" @tap="changAZ">{{char}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceSearch from '../../graceUI/components/graceSearch.vue';
//引入城市数据
var dataObj = require('../../graceUI/data/cityData.js');
export default {
	onReady:function(){
		setTimeout(()=>{
			uni.createSelectorQuery().select('#gBody').fields(
				{size: true}, (res) => {
					uni.createSelectorQuery().select('#hSearch').fields(
						{size: true}, (res2) => {
							this.mainHeight = res.height - res2.height;
							// #ifdef H5
							this.mainHeight = res.height - res2.height - 44;
							// #endif
						}
					).exec();
				}
			).exec();
		},1000);
	},
    data() {
    	return {
			mainHeight : 500,
			cityData   : dataObj.cityData,
			AZ         : dataObj.AZ,
			currentCity : "北京市",
			hotCities : [
				{code : 110000, name : "北京市"},
				{code : 310000, name : "上海市"},
				{code : 330100, name : "杭州市"},
				{code : 610100, name : "西安市"},
				{code : 120000, name : "天津市"},
				{code : 340200, name : "芜湖市"}
			],
			showCityId  : '',
			searchTimer : null,
			searchIndex : -1
		}
    },
	methods:{
		goback: function() {
			uni.navigateBack({});
		},
		// 选择
		chooseCity : function(e){
			// 数据保存在 cityname 和 citycode
			var cityname = e.currentTarget.dataset.cityname;
			var citycode = e.currentTarget.dataset.citycode;
			uni.showToast({
				title :cityname + " [ "+ citycode +" ]",
				icon  : "none"
			});
			this.currentCity = cityname;
		},
		// 搜索
		search : function(k){
			k = k.toLowerCase();
			if(k == ''){
				this.showCityId = 'pageTop';
				return;
			}
			if(this.searchTimer != null){clearTimeout(this.searchTimer);}
			this.searchTimer = setTimeout(()=>{this.searchBase(k);}, 500);
		},
		searchBase : function(k){
			this.searchIndex = -1;
			for(var i in this.cityData){
				for(var ii = 0; ii < this.cityData[i].length; ii++){
					if(this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0){
						this.searchIndex = this.cityData[i][ii].code;
						break;
					}
				}
				if(this.searchIndex != -1){break ;}
			}
			if(this.searchIndex != -1){
				this.showCityId = 'grace-city-list-'+this.searchIndex;
			}
		},
		// 点击切换
		changAZ : function(e){
			var char = e.currentTarget.dataset.char;
			uni.showToast({title:char, icon:"none"});
			this.showCityId = 'grace-city-AZ-' + char;
		}
	},
	components:{
		gracePage, graceSearch
	}
}
</script>
<style>
.grace-city-AZ{background:#FFFFFF; border-bottom:1px solid #F6F7F8; font-weight:700; line-height:88rpx;}
.grace-city-AZ-right{background:#FFFFFF; width:50rpx; position:fixed; right:0; top:60px;}
/* #ifdef H5 */
.grace-city-AZ-right{top:110px;}
/* #endif */
.grace-city-AZ-right view{line-height:42rpx; font-size:28rpx; text-align:center;}
.hotcity-item{width:210rpx; font-size:26rpx; height:70rpx; line-height:70rpx; border-radius:10rpx; text-align:center; overflow:hidden; margin:5rpx; background-color:#F6F7F8;}
.city-item{line-height:88rpx; height:88rpx; font-size:26rpx; border-bottom:1px solid #F6F7F8;}
</style>